

<!-- 
    所有的增删改查的思路都是一样,首页的展示是怎么美观怎么来,
    而后端呢,实际上就是增删改查.
    
    在List.veu展示的是Table界面,以及对每一行都都有相应的操作(详情,修改,删除)
    以及(搜索,批量删除,添加)

    另外呢,我们还需要一个展示修改的界面.

 -->


<script>
import UpdateOrAdd from './UpdateOrAdd.vue'
export default {
    components: {
        // 获取组件来展示详细的具体数据
        UpdateOrAdd
    },
    data() {
        return {
            tableData: [],      // 数据
            currentPage: 1,     // 当前页
            pageSizes: [4, 8, 12, 16],      // 分页比例
            pageSize: 4,        // 每页的数量
            total: 0,           // 总数
            dataListSelections: [],      // 选中的数据
            // 查询参数
            paramForm: {
                userName: '',
                userRole: '',
            },
            centerDialogVisible: false,
        }
    },
    methods: {
        // 获取数据
        getDataList() {
            // 分页基本参数
            let param = {
                pageSize: this.pageSize,
                currentPage: this.currentPage,
                params: {
                }
            }
            // 需要的话,额外添加参数
            if (this.paramForm.userName != '' && this.paramForm.userName != undefined) {
                param.params['userName'] = this.paramForm.userName
            }
            if (this.paramForm.userRole != '' && this.paramForm.userRole != undefined) {
                param.params['userRole'] = this.paramForm.userRole
            }
            // 请求分页
            this.$http({
                url: '/user/page',
                method: 'post',
                data: param
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    // 分页数据
                    this.tableData = data.data.list
                    // 分页总条数
                    this.total = data.data.total
                } else {
                    // 否则就没有了
                    this.tableData = []
                    this.totalPage = 0
                }
            })

        },
        // 当前页改变
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage
            this.getDataList()
        },
        // 每页大小改变
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.currentPage = 1
            this.getDataList()
        },
        // dataListSelections保存所选的全部数据,不过要map一下,取其中的id值, 达到批量删除的
        handleSelectionChange(selection) {
            this.dataListSelections = selection
        },
        // 根据条件搜索以及没有条件也可以搜索
        handleSearch() {
            this.pageIndex = 1;
            this.getDataList();
        },
        // 删除（批量删除）
        handleDelete(id) {
            // 单个删除,还是批量删除,其实在布局的时候已经做了处理     
            var ids = id
                ? [Number(id)]
                : this.dataListSelections.map(item => {
                    return Number(item.id);
                });
            this.$confirm(`确定进行 [ ${id ? "删除" : "批量删除"} ] 操作?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$http({
                    url: "user/delete",
                    method: "post",
                    // 在后端设置为 long[] ids
                    data: ids
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: "删除操作成功",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                this.handleSearch()
                            }
                        });
                    } else {
                        this.$message.error("删除失败");
                    }
                });
            });
        },
        /**
         * 我们要如何将以下三种情况在新的页面展示呢,那么就是父子之间通信了
         * type = ( add, update, detail ) 以及 id
         */
        handleAddOrUpdate(type, id) {             //详情、添加、修改
            this.$refs.UpdateOrAddDialog.centerDialogVisible = true
            this.$refs.UpdateOrAddDialog.init(type, id)
        },
    },
    // 初始化装载
    mounted() {
        this.getDataList()
    }
}
</script>

<template>
    <div class="container">
        <!-- 顶部的操作 -->
        <el-form :inline="true" :model="paramForm">
            <el-form-item label="用户名：">
                <el-input v-model="paramForm.userName" placeholder="用户名" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="角色：">
                <el-input v-model="paramForm.userRole" placeholder="角色" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item>
                <!-- 查询 -->
                <el-button type='success' @click="handleSearch()" round>查询</el-button>
                <!-- 添加 type=add, id=null -->
                <el-button type='primary' @click="handleAddOrUpdate('add')" round>添加</el-button>
                <!-- 当dataListSelections <= 0时,证明没有进行多选,所以不可以选择,防止误选 -->
                <el-button :disabled="dataListSelections.length <= 0" type='warning' @click="handleDelete()"
                    round>批量删除</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableData" width="100%" height="400px" border @selection-change="handleSelectionChange"
            table-layoutit="fixed">
            <!-- 多选 -->
            <el-table-column type="selection" width="55" header-align="center" align="center" />

            <el-table-column header-align="center" align="center" prop="userName" label="用户名">
                <template #default="scope">
                    {{ scope.row.userName }}
                </template>
            </el-table-column>

            <el-table-column header-align="center" align="center" prop="userRole" label="角色">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.userRole == 'admin'">{{ scope.row.userRole }}</el-tag>
                    <el-tag type="primary" v-else>{{ scope.row.userRole }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column header-align="center" align="center" prop="userAvatar" label="头像" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-image :src="scope.row.userAvatar" />
                    </div>
                </template>
            </el-table-column>

            <el-table-column header-align="center" align="center" prop="userEmail" label="邮箱">
                <template #default="scope">
                    {{ scope.row.userEmail }}
                </template>
            </el-table-column>

            <el-table-column header-align="center" align="center" prop="userCredit" label="身份证">
                <template #default="scope">
                    {{ scope.row.userCredit }}
                </template>
            </el-table-column>

            <!-- 操作界面 -->
            <el-table-column label=" 操作" fixed="right" width="150" header-align="center">
                <template #default="scope">
                    <el-space wrap alignment="center">
                        <!-- 详情 type=detail, id=每行的id值 -->
                        <el-button type="primary" size="small" @click="handleAddOrUpdate('detail', scope.row.id)">
                            详情</el-button>
                        <!-- 修改 type=update, id=每行的id值 -->
                        <el-button type="success" size="small" @click="handleAddOrUpdate('update', scope.row.id)">
                            修改</el-button>
                        <!-- id=每行的id值 -->
                        <el-button type="warning" size="small" @click="handleDelete(scope.row.id)">
                            删除</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes" background
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" class="bottom-pagination" />


        <!-- 三种方式的新界面 -->
        <UpdateOrAdd ref='UpdateOrAddDialog' :parent="this" />

    </div>
</template>


<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 10px;
    overflow: hidden;

    .bottom-pagination {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>